<template>
  <el-card>
    <el-table border :data="data">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template #="{ row, index }">
          <img :src="row.skuDefaultImg" style="width: 100; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            v-if="row.isSale"
            type="success"
            size="small"
            title="下架"
            :icon="Top"
            @click="addHandler(row.id, true)"
          ></el-button>
          <el-button
            v-else
            type="info"
            size="small"
            title="上架"
            :icon="Bottom"
            @click="addHandler(row.id, false)"
          ></el-button>

          <el-button
            type="primary"
            size="small"
            title="修改"
            :icon="Edit"
            @click="addEdit"
          ></el-button>

          <el-button
            type="info"
            size="small"
            title="查看详情"
            :icon="Pointer"
            @click="addDrawer(row.id)"
          ></el-button>

          <!-- 气泡弹框 -->
          <el-popconfirm
            :title="`确定删除${row.skuName}吗?`"
            @confirm="remove(row.id)"
          >
            <template #reference>
              <el-button
                type="danger"
                size="small"
                title="删除sku"
                :icon="Delete"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="current"
      v-model:page-size="limit"
      :total="total"
      layout="prev, pager, next, jumper"
      @current-change="getData"
    />
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" :with-header="false" size="50%">
      <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ info.skuName }}</el-col>
      </el-row>

      <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ info.skuDesc }}</el-col>
      </el-row>

      <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ info.price }}</el-col>
      </el-row>

      <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            type="success"
            v-for="attr in info.skuAttrValueList"
            :key="attr.id"
            style="margin-right: 5px"
            >{{ attr.attrName }}-{{ attr.valueName }}</el-tag
          >
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            type="success"
            v-for="attr in info.skuSaleAttrValueList"
            :key="attr.id"
            style="margin-right: 5px"
            >{{ attr.saleAttrName }}-{{ attr.saleAttrValueName }}</el-tag
          >
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <!-- 走马灯 -->
          <div class="block text-center" m="t-4">
            <el-carousel trigger="click" height="400px" style="width: 400px">
              <el-carousel-item
                v-for="item in info.skuImageList"
                :key="item.id"
              >
                <img
                  :src="item.imgUrl"
                  :style="{ width: '400px', height: '500px' }"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted,ref } from "vue";
import skuApi, {type SkuListModel,type SkuModel} from "@/api/product/sku";
import { ElMessage } from "element-plus";
import { Top,Bottom, Delete, Pointer, Edit } from "@element-plus/icons-vue";

//挂载
onMounted(() => {
  getData();
});

//切换上下线
let addHandler = async (skuId:number,falg:boolean)=>{
  try{
    if(falg){

      await skuApi.cancelSale(skuId)
    }else{

      await skuApi.onSale(skuId)
    }

    // 弹框
    ElMessage.success(`${falg ? '下架':'上架'}成功`)
    // 发请求
    getData()
  }catch(e){
    // 弹框
    ElMessage.error(`${falg ? '下架':'上架'}失败`)
  }
}
//编辑
let addEdit = ()=>{
  ElMessage.success('正在开发中！！！！')
}
//查看详情
let addDrawer = async (skuId:number) =>{
  drawer.value = true
  //发请求
  try{
    let result = await skuApi.getSkuInfo(skuId)
    info.value = result

  }catch(e){

  }
}
//删除
let remove = async (skuId:number)=>{
  try{
    //发请求
    await skuApi.delete(skuId)
    // 弹框
    ElMessage.success('删除成功')
    //获取数据
    getData()
  }catch(e){
     // 弹框
     ElMessage.error('删除失败')
  }
}

//存储详情信息
let info = ref<SkuModel>({})
//抽屉状态
let drawer = ref(false)
//当前页
const current = ref(1)
// 单页显示数
const limit = ref(10)
// 总数
const total = ref(1)
// 翻页
const handleCurrentChange = (val:number)=>{
    current.value = val
    // 发请求渲染
}
// 存储当前数据
const data = ref<SkuListModel>([])


//发请求
const getData = async () => {
  try {
    let result = await skuApi.getPage(current.value,limit.value);
    total.value = result.total
    data.value =  result.records
  } catch {
    ElMessage.error("获取数据失败");
  }
};
</script>

<style lang="scss" scoped>
.el-col {
  line-height: 40px;
  padding: 0 10px;
}
.el-col-6 {
  font-size: 24px;
  font-weight: bold;
  text-align: right;
}
.el-col-18 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep(.el-carousel__button){
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: skyblue;
}


</style>